
const {resolve} = require('path')
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const UglifyJSPlugin=require('uglifyjs-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;



module.exports = ({production}={production:false},argv) => ({
    mode:production?'production':'development',
    entry: {
        app: './src/app/index.js',
    },
    devtool: production? false : 'inline-source-map',//用于debug--找到文件
    output: {
        path: path.resolve(__dirname, './dist'),//输出目录
        filename: production?'bundle.[name].[chunkhash].js':'[name].bundle.js',//把所有依赖的模块合并输出到一个 bundle.js 文件
        publicPath: production?'':'/'
    },
    plugins: [
        new ExtractTextPlugin({filename:"[name]_[hash].css"}),//抽离css文件//hash的重要性
        new HtmlWebpackPlugin({//自动生成html文件//更新html文件
            filename: 'index.html',
            template: './index.html',
            favicon: './favicon.ico'
        }),
        //接下来是concat内容：根据环境的不同选择加载不同的插件
    ].concat(!production? [
        new webpack.HotModuleReplacementPlugin(),//模块热替换插件//只更新改变的内容，加速开发
        new webpack.NamedModulesPlugin(),//显示更新的文件名字
    ] : []).concat(production?[
        new BundleAnalyzerPlugin(),//打包的插件，可以不要，可以看打包后的体积
        new webpack.DefinePlugin({//定义环境
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
        }),
    ]:[])
    ,
   optimization: {
   /* splitChunks: {
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendor"
                }
            }
        },*/
        minimizer: production?[
      new UglifyJSPlugin({//压缩js//开发环境不要压缩易于debug
        uglifyOptions: {
          output: {
            comments: false
          },
          compress: {
            warnings: false,
          }
        }
      }),
    ]:[]
},
    module: {//配置各种loader
        rules: [{
            test: /\.js|jsx$/,
            exclude: /node_modules/,
            loader: 'babel-loader?cacheDirectory',
            query: {
                plugins: [["import", { libraryName: "antd", style: "css"}],'transform-runtime'],
                presets: ['es2015', 'react', 'stage-2']
            },
            include:path.resolve(__dirname,'src')
        }, 
        
        {
            test: /\.css$/,
            use:['style-loader','css-loader']
        },
   
         {
           test: /\.scss$/,
           include: path.resolve(__dirname, "src"),
           exclude:path.resolve(__dirname,"node_modules"),
           use:ExtractTextPlugin.extract({
               fallback: 'style-loader',
               use: [
                   {
                       loader: 'css-loader',
                       query: {
                           modules: true,
                           localIdentName: '[local]___[hash:base64:5]'
                       }
                   },
                   {
                       loader: 'sass-loader'
                   }
               ]
           })
       }, 
   
       {
           test: /\.(png|svg|jpg|gif|mp4|woff|woff2|eot|ttf|otf|jpeg)$/,
           include: path.resolve(__dirname, "src"),
           use: ['file-loader']
       }
       ]
    },
    devServer: {//配置开发环境内容
        historyApiFallback: true,
        port: 5033,
        compress: true,
        inline: true,
        hot: true,
        contentBase: './doc',
        stats: {
            assets: true,
            children: false,
            chunks: false,
            hash: false,
            modules: false,
            publicPath: false,
            timings: true,
            version: false,
            warnings: true,
            colors: {
                green: '\u001b[32m',
            }
        },
    },
    performance: production && {
        maxAssetSize: 100,
        maxEntrypointSize: 300,
        hints: 'warning',
    },
    externals: {
           'react': 'React',
           'react-dom':'ReactDOM'
    },
    stats: {
        colors: {
            green: '\u001b[32m',
        }
    }
})
